<template>
  <div class="home_container">
    <div class="home_wrapper">
      <div class="home_left">
        <LeftNav
          v-for="(item,index) in navs"
          :key="index"
          :item="item"
          :index="index"
          :selIndex="selIndex"
          v-on:changeSelIndex="changeSelIndex"
        ></LeftNav>
      </div>

      <div class="home_right" ref="right" @touchstart="start">
        <div ref="block" class="home_right_wrapper" v-for="(item,index) in navs" :key="index">
          <p class="home_right_tab_title">{{item.title}}</p>
          <div class="home_right_goods">
            <div class="home_right_goods_card" v-for="(items,subIndex) in item.aaa" :key="subIndex">
              <img :src="items.img" alt />
              <div class="home_goods_cards">
                <p style="font-size:.24rem;" class="van-ellipsis">{{items.title}}</p>
                <p>{{items.num}}</p>
                <p class="home_price">
                  <span style="color:red;font-size:.25rem;">￥{{items.price}}</span>
                  <span @click="addcart(items)" class="home_add">＋</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home_bottom">
      <span @click="showPopup" class="iconfont icon-gouwuche"></span>
      <span class="home_bottom_money">总价：￥0.00</span>
    </div>
    <van-popup v-model="show" closeable position="bottom">
      <div class="popup_container">
        <div class="popup_allInp">
          <input type="checkbox" @click="onAllChecked" :checked="allChecked" style="zoom: 200%;" />
          <span>全选</span>
        </div>

        <div class="popup_goods_card" v-for="(item,index) in cart" :key="index">
          <input
            @change="onCheckbox(item,$event)"
            :checked="item.checked"
            type="checkbox"
            style="zoom: 200%;"
          />
          <div class="popup_goods_card_cons">
            <img :src="item.carts.img" alt />
            <div class="popup_card_right">
              <p class="popup_title">
                {{item.carts.title}}
                <span @click="del(index)" class="iconfont icon-shanchu2"></span>
              </p>
              <p class="popup_carts_price">
                <span>￥{{item.carts.price}}</span>
                <span>
                  <van-stepper @change="onChange" v-model="item.num" />
                </span>
              </p>
            </div>
          </div>
        </div>

        <div class="popup_carts_bottom">
          <p>总价：￥{{money.toFixed(2)}}</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import REM from "../utills/rem";
import LeftNav from "../components/LeftNav";
export default {
  data() {
    return {
      show: false
    };
  },
  components: {
    LeftNav
  },
  mounted() {
    REM.Rem();
    this.$store.dispatch("getdata");
    this.$refs.right.addEventListener("scroll", this.onScroll);
    //刷新后保存选中后的价格
    this.$store.state.money = 0;
      this.$store.state.cart.map(res => {
        if (res.checked == true) {
          this.$store.state.money += res.carts.price * res.num;
        }
      })
  },
  computed: {
    navs: function() {
      return this.$store.state.navs;
    },
    selIndex: function() {
      return this.$store.state.selIndex;
    },
    cart: function() {
      return this.$store.state.cart;
    },
    money:function () {
      return this.$store.state.money;
    },
    allChecked:function () {
      return this.$store.state.allSelected;
    }
  },
  methods: {
    start() {
      this.$refs.right.addEventListener("scroll", this.onScroll);
    },
    //点击左侧一级导航 跳到 相应的二级导航
    changeSelIndex() {
      var divBlock = this.$refs.block[this.selIndex];
      divBlock.scrollIntoView({ behavior: "smooth" });
      this.$refs.right.removeEventListener("scroll", this.onScroll, false);
    },
    //滑动右侧二级导航 响应左侧一级导航
    onScroll() {
      //获取右侧滚动的距离
      var offset = event.target.scrollTop;

      //获取右侧所有 块
      var rightElements = this.$refs.block;
      for (let index = 0; index < rightElements.length; index++) {
        var currentElement = rightElements[index];
        var nextElement = rightElements[index + 1];
        if (
          offset > currentElement.offsetTop &&
          offset < nextElement.offsetTop
        ) {
          this.$store.dispatch("getselIndex", index);
        }
      }
    },
    //添加商品到购物车
    addcart(items) {
      // console.log(item);
      //添加购物车
      this.$store.dispatch("addcarts", items);
    },
    //点击购物车商品加减
    onChange() {
      this.$store.dispatch("onChange");
    },
    //点击复选框
    onCheckbox(item,e) {
      e = e.target.checked;
      item.checked = e;
      this.$store.dispatch('OnCheckBox',item)
    },
    //点击全选
    onAllChecked() {
      var checked = event.target.checked;
      this.$store.dispatch('onAllChecked',checked)
    },
    //删除
    del(index) {
      this.$store.dispatch('del',index)
      // console.log(index);
    },
    //点击出现弹出层
    showPopup() {
      this.show = true;
    }
  }
};
</script>

<style scoped>
.home_container {
  width: 100%;
  height: 10.4rem;
  font-size: 0.2rem;
}
.home_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}
.home_left {
  width: 35%;
  height: 100%;
  overflow: scroll;
  border-right: 1px solid lightgrey;
}
.home_right {
  width: 65%;
  height: 100%;
  overflow: scroll;
}
.home_right_wrapper {
  width: 100%;
  /* border: 1px solid lightgrey; */
  margin-bottom: 1rem;
}
.home_right_tab_title {
  width: 100%;
  height: 50px;
  font-size: 0.25rem;
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #999;
  text-indent: 0.2rem;
}
.home_right_goods {
  width: 100%;
}
.home_right_goods_card {
  width: 95%;
  height: 1.2rem;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}
.home_goods_cards {
  width: 60%;
  line-height: 0.38rem;
}
.home_goods_cards_title {
  font-size: 0.22rem;
}
.home_price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_add {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid red;
  border-radius: 50%;
  text-align: center;
  line-height: 0.3rem;
  margin-right: 0.1rem;
  color: red;
}
.home_bottom {
  width: 100%;
  height: 64px;
  border-top: 1px solid lightgrey;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #fff;
}
.icon-gouwuche {
  font-size: 0.5rem;
  padding: 0.15rem;
  border-radius: 50%;
  background-color: rgba(240, 238, 238, 0.883);
  position: fixed;
  bottom: 0.4rem;
  left: 0.2rem;
}
.home_bottom_money {
  font-size: 0.25rem;
  margin-left: 2rem;
  line-height: 0.8rem;
}
.popup_container {
  width: 100%;
  /* border: 1px solid red; */
  background-color: rgb(236, 235, 235);
}
.popup_allInp {
  width: 100%;
  height: 0.7rem;
  display: flex;
  align-items: center;
  font-size: 0.3rem;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0rem 0.15rem;
  margin-bottom: 0.15rem;
}
.popup_goods_card {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0rem 0.15rem;
  margin-top: 0.1rem;
}
.popup_goods_card_cons {
  width: 90%;
  /* border:1px solid red; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup_goods_card_cons img {
  width: 25%;
}
.popup_card_right {
  width: 72%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  padding: 0rem 0.05rem;
  font-size: 0.24rem;
}
.popup_title {
  display: flex;
  justify-content: space-between;
  margin-top: 0.05rem;
  margin-bottom: 0.05rem;
}
.popup_carts_price {
  color: red;
  font-size: 0.25rem;
  display: flex;
  justify-content: space-between;
}
.popup_carts_bottom {
  border-top: 1px solid #999;
  height: 0.5rem;
  width: 100%;
  margin-top: 0.1rem;
  font-size: 0.25rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.popup_carts_bottom p {
  /* display: flex; */
  box-sizing: border-box;
  padding: 0.1rem;
  text-align: right;
  /* justify-content: space-between; */
  /* align-items: center; */
}
</style>